<html lang="cn">

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="陶士涵">
    <title>GO-FLY即时通讯工具集</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        body {
            overflow: hidden;
            background-color: #f5f5f5;
        }

        .el-aside {
            height: 100%;
            background: #fff;
            border: solid 1px #e6e6e6;
        }

        .el-aside .el-menu {
            border-right: none;
        }

        .mainLogo {
            font-size: 20px;
            font-weight: bold;
        }

        .mainMain {
            background: #fff;
            margin-left: 10px;
            margin-bottom: 60px;
        }

        .mainIframe {
            width: 100%;
            height: 100%;
        }

        .el-card__body {
            cursor: pointer;
        }
    </style>

</head>

<body class="text-center">
    <div id="app">
        <template>
            {{template "nav" }}
            <iframe class="mainIframe" v-bind:src="iframeUrl" frameborder="0"></iframe>
        </template>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        delimiters: ["<{", "}>"],
        data: {
            iframeUrl: "",
            mailTotal: 0,
            adminAvator: "",
            adminRole: "",
        },
        methods: {
            openIframeUrl(url) {
                this.iframeUrl = url;
            },
            //跳转
            openUrl(url) {
                window.location.href = url;
            },
            GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            },
            checkAuth() {
                let _this = this;
                $.ajax({
                    type: "post",
                    url: "/check_auth",
                    headers: {
                        "token": localStorage.getItem("token")
                    },
                    success: function (data) {
                        if (data.code != 200) {
                            window.location.href = "/login";
                        } else {
                            _this.adminAvator = data.result.avator;
                            _this.adminRole = data.result.role_name;
                            _this.iframeUrl = "/chat_main";
                        }
                    }
                });
            }
        },
        created: function () {
            this.checkAuth();
        }
    })

</script>
<script>
    new Vue({
        delimiters: ["<{", "}>"],
        data: {
            websock: null,
        },
        created() {
            //this.initWebSocket();
        },
        destroyed() {
            this.websock.close() //离开路由之后断开websocket连接
        },
        methods: {
            initWebSocket() { //初始化weosocket
                const wsuri = "ws://127.0.0.1:8080/push_mail";
                this.websock = new WebSocket(wsuri);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen() { //连接建立之后执行send方法发送数据
                // let actions = "ping";
                // let _this=this;
                // setInterval(function(){
                //     _this.websocketsend(JSON.stringify(actions));
                // },10000);
            },
            websocketonerror() {//连接建立失败重连
                this.initWebSocket();
            },
            websocketonmessage(e) { //数据接收
                const redata = JSON.parse(e.data);
                if (redata.code == 200) {
                    this.$notify({
                        title: redata.result.folder_name,
                        message: "新邮件：" + redata.result.new_num,
                        type: 'success',
                        duration: 0,
                    });
                }
            },
            websocketsend(Data) {//数据发送
                this.websock.send(Data);
            },
            websocketclose(e) {  //关闭
                console.log('断开连接', e);
            },
        },
    });
</script>


</html>